<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
    <title>Examples • Island</title>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="../bundle.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Camera -->
      <a-entity id="rig" movement-controls position="3 3.4 -10">
        <a-entity id="camera"
                  camera
                  position="0 1.6 0"
                  look-controls="pointerLockEnabled: true"></a-entity>
      </a-entity>

      <!-- Island - Made in MagicaVoxel. -->
      <a-entity rotation="-90 0 0" scale="0.3 0.3 0.3" ply-model="src: url(../assets/island-hut/island-hut.bake.ply);"></a-entity>

      <!-- Ocean -->
      <a-ocean width="50" depth="50" density="40" opacity="1" position="0 3 0"></a-ocean>

      <!-- Sky -->
      <a-sky color="#AADDF0"></a-sky>

      <!-- Lighting -->
      <a-light type="ambient" color="#ccc"></a-light>
      <a-light color="#ddf" distance="100" intensity="0.4" type="point"></a-light>
      <a-light color="#ddf" position="3 10 -10" distance="50" intensity="0.4" type="point"></a-light>

    </a-scene>
  </body>
</html>
